<template>
    <div class="header">
    <div class="box-container" style="display:table;">
        <div class="logo" style="color:#fff;display:table-cell; width:180px;">
           <img src='../../../static/img/logo.png' style="display:inline-block;"/>
            <span style="display:inline-block;vertical-align:middle;height:60px;line-height:65px;margin-left:5px;">后台管理</span>
        </div>
        <div style="display:table-cell;text-align:center;">
        <v-sidebar></v-sidebar>
    </div>
        <div  style="display:table-cell;width:200px;float:right;color:#fff;cursor:pointer;">
            <span v-show="false" class="showQcrode" @click="showCode=true">APP</span>
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <!--<img class="user-logo" :src="avatar"> -->
                    {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- <a href="javascript:;" @click="jump('/editMInfo')" style="color:#000;"><el-dropdown-item >个人设置</el-dropdown-item></a> -->
                    <!-- <el-dropdown-item command='changepwd'>修改密码</el-dropdown-item> -->
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <el-dialog title="打开微信扫描访问小程序" :visible.sync="showCode" :modal='false'>
            <div style="text-align:center;">
                <img src='../../../static/img/qcrode.jpg' style='width:250px;height:250px;'/>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="default" @click="showCode=false">关闭</el-button>
            </div>
        </el-dialog>
        </div>
    </div>
</template>
<script>
import * as Login from "../../service/login";
import vSidebar from "./Sidebar.vue";
export default {
  components: {
    vSidebar
  },
  data() {
    return {
      showCode: false,
      // username:'',
    };
  },
  computed: {
    username() {
      let userinfo = Login.getLogin();
      return userinfo.loginName;
    },
    avatar() {
      let userinfo = Login.getLogin();
      return userinfo.m_avatar;
    }
  },
  methods: {
    jump(url) {
      this.$jump(url);
    },
    handleCommand(command) {
      if (command == "loginout") {
        Login.clearLogin();
        this.$router.push("/login");
      }
      if(command=='changepwd'){
        this.$router.push('/ModifyPwd')
      }
    }
  },
  mounted () {
    
  }
};
</script>
<style scoped>
.showQcrode {
  cursor: pointer;
  color: #fff;
}
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 1368px;
  height: 60px;
  font-size: 15px;
  line-height: 60px;

  /* border-bottom:3px solid #44b549; */
  background: -webkit-linear-gradient(
    left,
    #2e77e8,
    #40abf9
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    left,
    #2e77e8,
    #40abf9
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    left,
    #2e77e8,
    #40abf9
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(left, #2e77e8, #40abf9); /* 标准的语法 */
}
.header img {
  vertical-align: middle;
  height: 30px;
}
.header .logo {
  float: left;

  text-align: left;
  padding-left: 20px;
}
.user-info {
  float: right;
  padding-right: 50px;
  font-size: 16px;
  color: #353535;
}
.user-info .el-dropdown-link {
  position: relative;
  display: inline-block;
  padding-left: 50px;
  color: #353535;
  cursor: pointer;
  vertical-align: middle;
}
.user-info .user-logo {
  position: absolute;
  left: 0;
  top: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-dropdown-menu__item {
  text-align: center;
}
</style>
